<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax文件上传</title>
    <script src="/js/jquery/jquery.min.js"></script>
</head>
<body>

    <fieldset>
        <legend>文件上传</legend>
        <div>
            <label for="files_add_id">请选择文件：</label>
            <input type="file" id="files_add_id" name="files" multiple/>
        </div>
    </fieldset>

    <fieldset id="result_box_id" style="display: none;color:blue;">
        <legend>上传结果：</legend>
        <pre id="result_id"></pre>
    </fieldset>

<script type="text/javascript">
$(function() {
    $("#files_add_id").change(function() {
        uploadSubmit();
    })
});

function uploadSubmit() {
    let formData = new FormData();
    let files = document.getElementById("files_add_id").files;
    for (let i = 0 ; i < files.length ; i++) {
        formData.append("files", files[i]);
    }
    formData.append("name", "chendd");
    formData.append("website", "https://www.chendd.cn");
    formData.append("hobbies", ["代码" , "游戏"]);

    $.ajax({
        url: '/ajax/upload',
        type: 'post',
        data: formData,
        dataType: "json",
        processData: false,
        contentType: false,
        success: function (result) {
            $("#result_box_id").show();
            $("#result_id").html(JSON.stringify(result , null , 4));
            $("#files_add_id").val("");
        },
        error: function (xhr, status, error) {
            $("#result_box_id").show();
            $("#result_id").html("上传失败：" + status + "，参考信息：" + error);
            $("#files_add_id").val("");
        }
    });
}

</script>

</body>
</html>